<template>
    <div>
        <p>用户名</p>
        <el-input v-model="input" placeholder="请输入用户名" style="width:450px"></el-input><br>
        <p>密码</p>
        <el-input v-model="password" placeholder="请输入密码" style="width:450px"></el-input><br>
        <p>邮箱</p>
        <el-input v-model="ema" placeholder="请输入邮箱" style="width:450px"></el-input><br>

            <el-button type="success" @click="add">添加</el-button>
          <el-button type="primary" @click="reset">重置</el-button>

          <!-- 表格 -->
          <el-table
    :data="tableData"
    style="width: 100%"
    max-height="250">
    <el-table-column
      fixed
      type="index"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    </div>

    
</template>

<script>
    export default {
         methods: {
      deleteRow(index, rows) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            rows.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      add(){
          this.tableData.push({
            name:this.input,
            province:this.password,
            zip:this.ema
          })
      },
      reset(){
          this.input=""
          this.password=""
          this.ema=""
      },
    },
    data() {
      return {
          input:"",
          password:"",
          ema:"",
        tableData: [{
          name: '王小虎',
          province: '上海',
          zip: 200333
        },
        
        ]
      }
    }
  }
</script>

<style lang="less" scoped>

</style>